<template>
  <!--  TODO 开票申请单 -->
  <el-dialog v-model="visible" title="开票申请单" destroy-on-close width="60%" :close-on-click-modal="false" @close="close">
    <div class="mb-2 flex items-center text-sm">
      <el-form :model="formData" :rules="formRules" size="small" ref="createInvoiceFormRef" label-width="110px" class="drawer-form">
        <el-form-item prop="title" label="主题：">
          <el-input v-model="formData.title" placeholder="请输入事项主题" maxlength="32" clearable style="width: 400px;"/>
        </el-form-item>
        <el-form-item label="描述：" prop="content">
          <editor v-model="formData.content" placeholder="请输入事项描述" height="250px"/>
        </el-form-item>
        <el-form-item label="申请日期：">
          <el-date-picker style="width:125px;" v-model="formData.applyDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" size="small"/>
        </el-form-item>
        <el-form-item label="关联：">
          <module-relate :relateItems="changeRelateItems" :limiter="limiter" @required="required" @change="changeRelateItems"/>
        </el-form-item>
        <el-form-item prop="collectionType" label="发票类型：">
          <el-select v-model="formData.invoiceData.invoiceType" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable>
            <el-option v-for="item in invoiceTypeOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="remark" label="备注：" class="remark-item">
          <el-input type="textarea" v-model="formData.remark"></el-input>
        </el-form-item>
        <el-form-item prop="type" label="开票确认人：">
          <el-select v-model="formData.confirmedBy" style="width: 200px; height: 26px;" size="small" placeholder="请选择" clearable>
            <el-option v-for="item in userOption" :label="item.nickname" :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-divider><el-icon><ele-Money /></el-icon></el-divider>

        <div class="title">开票信息</div>
        <el-form-item prop="invoiceHeader" label="发票抬头：" class="inline-60">
          <el-input v-model="formData.invoiceData.invoiceHeader" placeholder="发票抬头" style="width: 90%;"/>
        </el-form-item>
        <el-form-item prop="taxpayerIdentity" label="纳税人识别号：" class="inline-40">
          <el-input v-model="formData.invoiceData.taxpayerIdentity" placeholder="纳税人识别号" style="width: 100%;"/>
        </el-form-item>
        <el-form-item prop="address" label="地址：">
          <el-input v-model="formData.invoiceData.address" placeholder="地址" style="width: 100%;"/>
        </el-form-item>
        <el-form-item prop="phone" label="电话：" class="inline-60">
          <el-input v-model="formData.invoiceData.phone" placeholder="电话" style="width: 90%;"/>
        </el-form-item>
        <el-form-item prop="accountBank" label="开户银行：" class="inline-40">
          <el-input v-model="formData.invoiceData.accountBank" placeholder="开户银行" style="width: 100%;"/>
        </el-form-item>
        <el-form-item prop="bankAccount" label="银行账号：" class="inline-60">
          <el-input v-model="formData.invoiceData.bankAccount" placeholder="银行账号" style="width: 90%;"/>
        </el-form-item>
        <div class="title">邮寄信息</div>
        <el-form-item prop="recipient" label="收件人：" class="inline-60">
          <el-input v-model="formData.invoiceData.recipient" placeholder="收件人" style="width: 90%;"/>
        </el-form-item>
        <el-form-item prop="recipientPhone" label="电话：" class="inline-40">
          <el-input v-model="formData.invoiceData.recipientPhone" placeholder="电话" style="width: 100%;"/>
        </el-form-item>
        <el-form-item prop="recipientAddress" label="邮寄地址：" style="margin-bottom: 10px">
          <el-input v-model="formData.invoiceData.recipientAddress" placeholder="邮寄地址" style="width: 100%;"/>
        </el-form-item>
<!--        <el-form-item prop="lineFile" label="附件：">-->
<!--          <el-upload class="upload-demo" drag-->
<!--                     :action="action"-->
<!--                     :multiple="false"-->
<!--                     :auto-upload="false"-->
<!--                     :headers="headers"-->
<!--                     @change="changeFile"-->
<!--                     style="width:100%">-->
<!--            <el-icon class="el-icon&#45;&#45;upload">-->
<!--              <ele-UploadFilled/>-->
<!--            </el-icon>-->
<!--            <div class="el-upload__text">-->
<!--              拖拽上传或 <em>点击上传</em>-->
<!--            </div>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="cancel(createInvoiceFormRef)">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="submit(createInvoiceFormRef)">保存</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>
import {computed, reactive, ref, toRefs} from "vue";
import Editor from '/@/components/editor/index.vue'
import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
import ModuleRelateByMoney from '/@/views/matter/components/ModuleRelateByMoney.vue'
import { Session } from '/@/utils/storage'

export default {
  name: "CreateInvoice",
  emits:['onSubmit','update:dialogDrawer'],
  props: {
    dialogDrawer: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: null,
    },
  },
  components: {
    Editor,
    ModuleRelateByMoney,
    ModuleRelate
  },
  setup(props, context) {
    let createInvoiceFormRef = ref()
    let changeRelateItems = ref([])
    const { dialogDrawer, type} = toRefs(props)
    let visible = computed({
      get: () => {
        if (dialogDrawer.value){
          state.dialogDrawer = true
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      formData:{
        title:'',
        content:'',
        applyDate:'',
        amount:'',//开票金额
        invoiceData:{
          invoiceType:'',
          invoiceHeader:'',
          taxpayerIdentity:'',//纳税人身份识别号
          phone:'',
          address:'',
          accountBank:'',//开户银行
          bankAccount:'',//银行账号
          recipient:'',//收件人
          recipientPhone:'',
          recipientAddress:''
        },
        confirmedBy:'',
        remark:''
      },
      formRules:{
        invoiceHeader:[{ required: true, trigger: 'blur', message: '请输入'}],
        phone:[{ required: true, trigger: 'blur', message: '请输入'}],
        accountBank:[{ required: true, trigger: 'blur', message: '请输入'}],
        bankAccount:[{ required: true, trigger: 'blur', message: '请输入'}],
        recipient:[{ required: true, trigger: 'blur', message: '请输入'}],
        recipientPhone:[{ required: true, trigger: 'blur', message: '请输入'}],
      },
      action: '#',
      headers: {'17work': Session.get('token')},
      selectedCode: {
        code: 'Money',   // 一级关联项数据code
        dataId: null // 二级关联项数据id
      },
      required:[],
      userOption:[],
      limiter:{
        module:"createInvoice", //代表哪一个钱模块
        number:"0"  //代表限制编号
      },
      invoiceTypeOption:[
        {
          label:'增值税专用发票',
          value:'0'
        },
        {
          label:'增值税普通发票',
          value:'1'
        }
      ],

    })


    /**
     * 通用方法
     */
        //关闭时触发
    const close = () => {
          context.emit('update:dialogDrawer', false)
        }
    //提交
    const submit = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (!valid) return // 必填没有填就直接结束
        context.emit('onSubmit', true)
      })
    }
    //取消
    const cancel = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
      context.emit("update:dialogDrawer", false)
    }
    //文件变更时
    const changeFile = (file,fileList) => {
      state.fileList = fileList
    }
    //变更事项类型
    const changeType = (val) => {
      state.limiter.number = val
    }

    return{
      ...toRefs(state),
      dialogDrawer,
      visible,
      createInvoiceFormRef,
      changeRelateItems,
      type,
      Editor,
      ModuleRelateByMoney,
      ModuleRelate,
      close,
      submit,
      cancel,
      changeFile,
      changeType,

    }

  }
}
</script>

<style scoped>
.inline{
  display: inline-flex;
  width: 50%;
}
.inline-60{
  display: inline-flex;
  width: 60%;
}
.inline-40{
  display: inline-flex;
  width: 40%;
}
.title{
  width: 100px;
  font-size: 13px;
  text-align: right;
  color: #212121;
  padding: 10px 10px 5px 5px;
  font-weight: bold;
  border-radius: 5px;
}
</style>
